<%--
  Created by IntelliJ IDEA.
  User: xinlong
  Date: 2017/10/17
  Time: 20:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>重置密码</title>
    <%@include file="/resources/common/head.jsp" %>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font-family: Microsoft Yahei;
        }
        body{
            background: url(/resources/images/register-background.png) no-repeat top center;
        }
        #container{
            width: 100%;
            position: absolute;
        }
        #header{
            width: 100%;
            height: 100px;
        }
        .header-panel{
            margin: 0px auto;
            max-width: 1200px;
            height: 100px;
        }
        .header-panel img{
            display: inline-block;
            padding-top: 10px;
            padding-bottom: 10px;
            max-height: 80px;
            float: left;
        }
        .header-panel-text{
            display: inline-block;
            margin-top: 25px;
            height: 50px;
            line-height: 50px;
            font-size: 30px;
            color: #333;
            border-left: 1px solid #efefef;
            padding-left: 20px;
            float: left;
        }
        #center{
            width: 100%;
        }
        .center-panel{
            margin: 0px auto;
            padding-top: 40px;
            padding-left: 50px;
            padding-right: 50px;
            max-width: 800px !important;
            height: 500px;
        }
        .layui-container{
            max-width: 700px !important;
            padding: 50px;
            background: RGBA(0,0,0,0.4);
            color: #fff;
            border-radius:25px;
        }
        .layui-container-title-check{
            display: inline-block;
            width: 33%;
            height: 40px;
            border-top: 3px solid #33A3DC;
            margin-bottom: 40px;
            float: left;
            position: relative;
        }
        .layui-container-title{
            display: inline-block;
            width: 33%;
            height: 40px;
            border-top: 3px solid #999999;
            margin-bottom: 40px;
            float: left;
            position: relative;
        }
        .layui-container-title-check img,.layui-container-title img{
            position: absolute;
            top: -17px;
            right: 45%;
            width: 30px;
        }
        .layui-container-title-check span{
            position: absolute;
            top:15px;
            left: 35%;
            display: inline-block;
            color: #33a3dc;
        }
        .layui-container-title span{
            position: absolute;
            top:15px;
            left: 35%;
            display: inline-block;
            color: #999999;
        }
        #footer{
            width: 100%;
        }
        .footer-panel{
            margin: 0px auto;
            max-width: 1200px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="header">
        <div class="header-panel">
            <img src="/resources/images/icon/威旅商标-黑.png">
            <div class="header-panel-text">
                找回密码
            </div>
        </div>
    </div>
    <div id="center">
        <div class="center-panel">
            <div class="layui-container">
                <div class="layui-container-title-check">
                    <img src="/resources/images/icon/1-check.png">
                    <span>确认账户</span>
                </div>
                <div class="layui-container-title-check">
                    <img src="/resources/images/icon/2-check.png">
                    <span>验证用户</span>
                </div>
                <div class="layui-container-title-check">
                    <img src="/resources/images/icon/3-check.png">
                    <span>修改密码</span>
                </div>
                <form id="resetPassword">
                    <div class="layui-form-item">
                        <label class="layui-form-label">新密码</label>
                        <div class="layui-input-block">
                            <input type="text" name="password" required  lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input ">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button  id="commit" class="layui-btn">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="footer">
        <div class="footer-panel">

        </div>
    </div>
</div>
<script>
    layui.config({
        base: '/resources/res/js/modules/' //你存放新模块的目录，注意，不是layui的模块目录
    }).use('index'); //加载入口

    //绑定提交事件
    $('#commit').click( function () {
        var status = 1;
        var msg;
        //发送请求
        $.ajax({
            type:"post",
            url:"/user/reset_password.do",      // 这里是提交到什么地方的url
            data:$('#resetPassword').serialize(),            // 这里把表单里面的数据放在这里传到后台
            dataType:"json",
            async: false,       //设置ajax请求为同步，防止发送请求后执行success代码异常
            success:function(res){
                if(res.status==0){
                    status = 0;
                }else {
                    msg = res.msg;
                }
            },
            error:function(res){
                if(res.status==0){
                    status = 0;
                }else {
                    msg = res.msg;
                }
            }
        });
        if(status == 0){
            layer.msg("密码修改成功！跳转至登录页", {icon: 6});
            setTimeout("javascript:location.href=wetravel.URL.login()", 1);
            return;
        }
        if(status == 1)
        {
            alert(msg);
            layer.msg("密码修改失败，"+msg+",跳转至登录页", {icon: 5});
            setTimeout("javascript:location.href=wetravel.URL.login()", 1);
            return;
        }
    });
</script>
</body>

</html>